<template>
  <div class="app-container customer-div">
    <el-alert
      type="warning"
      :closable="false">
      <template Slot="title">
        <span style="font-size: 14px;cursor: pointer" @click="getMonth">当月生日提醒（<span style="color:Red;font-weight: bold">{{ census.brith }}</span>）</span>
        <span style="padding-right:20px;font-size: 14px;cursor: pointer" @click="toht">30天合同到期提醒（<span style="color:Red;font-weight: bold">{{ census.contractExpire }}</span>）</span>
      </template>
    </el-alert>
    <div style="margin-top: 20px">
      <el-row :gutter="40">
        <el-col :span="6">
          <div class="top-block">
            <span class="name">在职</span>
            <span class="num">{{ census.onJob }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-block">
            <span class="name">全职</span>
            <span class="num">{{ census.fullTime }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-block">
            <span class="name">兼职</span>
            <span class="num">{{ census.partTime }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-block">
            <span class="name">实习生</span>
            <span class="num">{{ census.internship }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="40" style="margin-top:20px;">
        <el-col :span="6">
          <div class="top-block">
            <span class="name">试用期</span>
            <span class="num">{{ census.onTrial }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-block">
            <span class="name">正式</span>
            <span class="num">{{ census.formal }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-block">
            <span class="name">已离职</span>
            <span class="num">{{ census.leaveOffice }}</span>
          </div>
        </el-col>
        <el-col :span="6">

        </el-col>
      </el-row>

      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="80px" style="margin-top:40px;">
        <el-form-item label="关键字：">
          <el-input v-model="listQuery.keyword" placeholder="员工姓名/手机号/工号"></el-input>
        </el-form-item>
        <el-form-item label="生日月份：" >
          <div style="position: relative">
            <el-date-picker
              value-format="yyyy-MM"
              :clearable="false"
              v-model="listQuery.brithTime"
              type="month">
            </el-date-picker>
          </div>

        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
          <el-button
            @click="showImport"
            type="primary">
            导入
          </el-button>
          <exportPop ref="exportPop" @click.native="downloadExcel"></exportPop>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          label="员工姓名"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            <el-link @click="toInfo(scope.row.userId)" style="color:#409EFF;text-decoration: underline">{{scope.row.userName}}</el-link>
          </template>
        </el-table-column>

        <el-table-column
          label="员工工号"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.jobNumber}}
          </template>
        </el-table-column>

        <el-table-column
          label="手机号"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.mobile}}
          </template>
        </el-table-column>

        <el-table-column
          label="部门"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.departmentName}}
          </template>
        </el-table-column>

        <el-table-column
          label="岗位"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.job}}
          </template>
        </el-table-column>

        <el-table-column
          label="工作性质"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.attribute | fifattribute}}
          </template>
        </el-table-column>

        <el-table-column
          label="员工状态"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.status | fifygstatus}}
          </template>
        </el-table-column>

        <el-table-column
          label="性别"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.gender | fifgender}}
          </template>
        </el-table-column>

        <el-table-column
          label="入职日期"
          min-width="150"
          align="center">
          <template slot-scope="scope">
            {{scope.row.joinTime}}
          </template>
        </el-table-column>

        <el-table-column
          label="证件类型"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.certificatesType == 1 ? '身份证' :''}}
          </template>
        </el-table-column>

        <el-table-column
          label="证件号码"
          min-width="180"
          align="center">
          <template slot-scope="scope">
            {{scope.row.certificates}}
          </template>
        </el-table-column>

        <el-table-column
          min-width="150"
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="showPop(scope.row)">编辑
            </el-button>

            <el-button
              v-if="scope.row.status == 0"
              type="text"
              size="mini"
              @click="showPop2(scope.row,1)">转正
            </el-button>

            <el-button
              type="text"
              size="mini"
              @click="showPop2(scope.row,2)">异动
            </el-button>
            <el-button
              v-if="scope.row.status != 2"
              type="text"
              size="mini"
              @click="showPop2(scope.row,5)">离职
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

    <import-pop ref="importPop" @getList="handleSearchList"></import-pop>

    <!--员工编辑-->
    <el-dialog
      :close-on-click-modal="false"
      title="员工编辑"
      :visible.sync="dialogVisible"
      width="900px">
      <el-form :model="ygForm" size="mini" label-width="120px" ref="ygForm" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工姓名：">
                    {{ygForm.userName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别：">
                 <el-radio-group v-model="ygForm.gender">
                     <el-radio :label="1">男</el-radio>
                     <el-radio :label="2">女</el-radio>
                 </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号：">
                 <el-input style="width:200px" v-model="ygForm.mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱：">
                <el-input style="width:200px" v-model="ygForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="证件类型：">
                   身份证
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号：">
                  <el-input style="width:200px" v-model="ygForm.certificates"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="最高学历：">
                  <el-select v-model="ygForm.education">
                    <el-option value="1" label="小学"></el-option>
                    <el-option value="2" label="初中"></el-option>
                    <el-option value="3" label="高中"></el-option>
                    <el-option value="4" label="中专"></el-option>
                    <el-option value="5" label="大专"></el-option>
                    <el-option value="6" label="本科"></el-option>
                    <el-option value="7" label="硕士"></el-option>
                    <el-option value="8" label="博士"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族：">
                  <el-input style="width:200px" v-model="ygForm.nation"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="籍贯：">
                    <el-input style="width:200px" v-model="ygForm.nativePlace"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="现居住地：">
                <el-input v-model="ygForm.address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="出生日期：">
                  <el-date-picker
                    v-model="ygForm.brithTime"
                    style="width:200px"
                    type="date"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否阴历生日：">
                  <el-radio-group v-model="ygForm.isLunarCalendar">
                      <el-radio :label="2">否</el-radio>
                      <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="婚姻状态：">
                <el-radio-group v-model="ygForm.marriageStatus">
                  <el-radio :label="1">已婚</el-radio>
                  <el-radio :label="2">未婚</el-radio>
                  <el-radio :label="3">保密</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参加工作时间：">
                  <el-date-picker
                    v-model="ygForm.firstWorkTime"
                    style="width:200px"
                    type="date"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="入职时间：">
                  <el-date-picker
                    v-model="ygForm.joinTime"
                    style="width:200px"
                    type="date"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工号：">
                  <el-input style="width:200px" v-model="ygForm.jobNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="合同公司：">
                  <el-input style="width:200px" v-model="ygForm.contractCompany"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作性质：">
                <el-select v-model="ygForm.attribute">
                  <el-option label="全职" :value="1"></el-option>
                  <el-option label="兼职" :value="2"></el-option>
                  <el-option label="实习" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位：">
                 <el-input style="width:200px" v-model="ygForm.job"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="员工状态：">
                  <el-select v-model="ygForm.status">
                    <el-option label="试用" :value="0"></el-option>
                    <el-option label="正式" :value="1"></el-option>
                    <el-option label="离职" :value="2"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作邮箱：">
                   <el-input style="width:200px" v-model="ygForm.workingEmail"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作手机：">
                <el-input style="width:200px" v-model="ygForm.workingMobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!--员工异动编辑-->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible2"
      width="600px">
      <el-form :model="changeForm" size="mini" label-width="120px" ref="changeForm" :rules="rules2">
            <el-form-item label="员工姓名：">
              {{changeForm.userName}}
            </el-form-item>
            <el-form-item label="入职时间：">
              {{changeForm.userName}}
            </el-form-item>
            <el-form-item label="异动类型：" v-if="changeForm.type > 1 && changeForm.type < 5">
              <el-radio-group v-model="changeForm.type">
                <el-radio :label="2">调岗</el-radio>
                <el-radio :label="3">晋升</el-radio>
                <el-radio :label="4">降级</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item :label="labelTime+ '：'" prop="time">
                <el-date-picker
                  v-model="changeForm.time"
                  style="width:200px"
                  type="date"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="部门：" v-if="changeForm.type ==1">
              <el-cascader
                v-model="changeForm.departmentId"
                :options="data2"
                :props="{ value:'departmentId',label:'departmentName',emitPath:false}"
                clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="岗位：" v-if="changeForm.type ==1">
                  <el-input v-model="changeForm.position" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="原部门：" v-if="changeForm.type >1 && changeForm.type < 5">
              <span style="padding-right:10px">{{departmentName}}</span>
              <span style="padding-right:10px">变更为</span>
              <el-cascader
                v-model="changeForm.departmentId"
                :options="data2"
                :props="{value:'departmentId',label:'departmentName',emitPath:false}"
                clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="原岗位：" v-if="changeForm.type >1 && changeForm.type < 5">
              <span style="padding-right:10px">{{job}}</span>
              <span style="padding-right:10px">变更为</span>
              <el-input v-model="changeForm.position" style="width:200px"></el-input>
            </el-form-item>

            <el-form-item :label="labelRemark+ '：'" v-if="changeForm.type != 1">
              <el-input v-model="changeForm.remark" type="textarea" :rows="2"></el-input>
            </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {rosterUser,detailUser,updateInfo,addChangeLog,importUser} from '@/api/company'
import {getDeptList} from '@/api/management'
import importPop from './components/importPop.vue'
import exportPop from './components/exportPop.vue'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  brithTime:'',
  type:''
};
const defaultYGForm = {
  "userId": '',    //用户id
  "userName":'',  //用户名
  "mobile": "",   //手机号
  "gender": "",    //性别：1男，2女',
  "jobNumber": "",   //工号
  "certificates": "",  //证件号码
  "attribute": "",  //工作性质 1全职，2兼职 3实习
  "nation": ''  ,  //名族
  "job": '' ,    //岗位
  "education": ''  ,  // 1 小学 2 初中 3 高中 4 中专 5 大专 6 本科 7 硕士 8 博士',
  "address": ''  ,  //居住地
  "status": ''  ,   //1试用，2转正 3离职
  "contractCompany": '' , //合同公司
  "marriageStatus": '' ,  //婚姻状态 1 已婚 2未婚 3保密
  "isLunarCalendar": 2 , //1 是 阴历 2 不是
  "nativePlace": '',   //籍贯
  "brithTime": '' ,   //出生日期
  "email": '' ,    //邮箱
  "workingEmail": '' ,  //工作邮箱
  "workingMobile": '' ,  //工作手机
  "firstWorkTime": '' ,  //第一次工作时间
  "joinTime": ''  ,  //入职时间
  }
  const defaultchangeFrom = {
    "userId": '',      //用户id
    "type": '',       //'类型 1 转正 2 调岗 3 晋身 4 降级 5 离职',
    "remark": "",     //备注
    "departmentId": "",   //部门
    "position": "",    //岗位
    "time": "",     //时间
  }
export default {
  name: "index",
  components:{
    importPop,
    exportPop
  },
  data(){
    return {
      creator:'',
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,

      btnLoading:false,
      dialogVisible:false,
      ygForm:JSON.parse(JSON.stringify(defaultYGForm)),
      rules:{
        purchaseOrderSn:[{required: true, message: '此项必填', trigger: 'blur'},],
      },
      census:{},

      data2:[],
      data:[],
      dataLoading:false,
      changeForm:JSON.parse(JSON.stringify(defaultchangeFrom)),
      labelRemark:'',
      labelTime:'',
      title:'',
      btnLoading2:false,
      dialogVisible2:false,
      departmentName:'',
      job:'',
      rules2:{
        time:[{required: true, message: '此项必填', trigger: 'change'},],
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
    this.getList();
    this.getBuMenList();
  },
  filters: {
    fifattribute(val){
      if(val == 1){
        return '全职'
      }else if( val == 2){
        return '兼职'
      }else if( val == 3){
        return '实习'
      }
    },
    fifygstatus(val){
      if(val == 0){  //1试用，2转正 3离职
        return '试用'
      }else if(val == 1){
        return '正式'
      }else if(val == 2){
        return '离职'
      }
    },
    fifgender(val){
      if(val == 1){  //1试用，2转正 3离职
        return '男'
      }else if(val == 2){
        return '女'
      }
    },
  },
  methods:{
    toht(){
      let routeData = this.$router.resolve({name:'contractRecords',query:{status:'3'}});
      window.open(routeData.href);
    },
    getMonth(){
      let date = formatDate(new Date(),'yyyy-MM');
      console.log("date",date);
      this.listQuery.brithTime = date;
      this.handleSearchList()

    },
    downloadExcel(){
      this.$refs.exportPop.downloadExcel('exportUserInfo',this.listQuery)
    },
    //显导入弹窗
    showImport(){
      this.$refs.importPop.showImport('importUser','导入员工','/api/user/user/download',)
    },
    //显示异动弹窗
    showPop2(item,type){
      this.changeForm  = JSON.parse(JSON.stringify(defaultchangeFrom));
      this.changeForm.userId = item.userId;
      this.changeForm.userName = item.userName;
      this.changeForm.departmentId = item.departmentId;
      this.changeForm.position = item.job;
      this.changeForm.type = type;
      this.departmentName = item.departmentName;
      this.job = item.job;
      if(type == 1){
         this.labelRemark = '';
         this.labelTime = '转正时间';
         this.title = '确认转正';
      }else if(type == 2){
        this.labelRemark = '异动备注';
        this.labelTime = '生效日期';
        this.title = '人事异动';
      }else if(type == 5){
        this.labelRemark = '离职备注';
        this.labelTime = '离职日期';
        this.title = '确认离职';
      }
      this.dialogVisible2 = true;
    },
    handleClose2(){
      this.dialogVisible2 = false;
    },

    handleConfirm2(){
      this.$refs.changeForm.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.changeForm))
          addChangeLog(data).then((res)=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.btnLoading2 = false;
            this.handleClose2();
            this.getList();
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })
    },


    //去除不要的children
    forTree(list){
      let newList = list;
      if(newList.length){
        for (let i = 0; i<newList.length; i++){
          if(newList[i].children && newList[i].children.length > 0){
            this.forTree(newList[i].children)
          }else{
            delete newList[i].children;
          }
        }
        return newList
      }
    },
    //获取部门列表
    getBuMenList(){
      this.dataLoading = true;
      getDeptList().then((res)=>{
        this.data = res;
        this.data2 = [];
        this.data2 = this.forTree(this.data);
        this.dataLoading = false;

      })
    },
    //去详情页
    toInfo(userId){
      let routeData = this.$router.resolve({name:'employeeInfo',query:{userId:userId}});
      window.open(routeData.href);
    },

    //显示弹窗
    showPop(item){
      this.dialogVisible = true;
      this.ygForm = JSON.parse(JSON.stringify(defaultYGForm));
      detailUser({userId:item.userId}).then((res)=>{
        for (let key in defaultYGForm) {
          this.ygForm[key] = res['detail'][key]
        }
      })
    },

    //关闭弹窗
    handleClose(){
      this.dialogVisible = false;
      this.btnLoading = false;
    },

    //确认员工
    handleConfirm(){
      this.$refs.ygForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = JSON.parse(JSON.stringify(this.ygForm))
          updateInfo(data).then((res)=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.btnLoading = false;
            this.handleClose();
            this.getList();
          }).catch(()=>{
            this.btnLoading = false;
          })
        }
      })
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取订单列表
    getList() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery));
      rosterUser(listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.census = response.census;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },

    //去详情页
    toDetail(type,item){
      localStorage.setItem('saleListQuery', JSON.stringify(this.listQuery));
      let routeData = this.$router.resolve({name:'saleDetail',query:{id:item.orderId,type:type}});
      window.open(routeData.href);
      // this.$router.push({name:'saleDetail',query:{id:item.orderId,type:type}})
    },

    //去客户详情页
    toCustomerDetail(item){
      localStorage.setItem('saleListQuery', JSON.stringify(this.listQuery));
      this.$router.push({name:'customerDetail',query:{id:item.customerId}})
    },

  },
}
</script>

<style scoped lang="scss">
  .top-block{
    border:1px solid #eee;
    border-radius: 8px;
    text-align: center;
    padding:20px;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    /* 09版 */
    -webkit-box-align: center;
    /* 12版 */
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    -o-align-items: center;
    align-items: center;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    .num{
      font-size:26px;
      font-weight: bold;
      cursor: pointer;
    }
    .name{
      font-size:14px;
      color:#888;
      padding-top:10px;
    }
  }
</style>
